import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:live_music/components/ui/theme.dart';
import 'package:live_music/controller/userInfo_controller.dart';
import 'package:live_music/pages/userInfo/edit_userInfo.dart';
import 'package:live_music/utils/cgq_utils.dart';
import 'package:live_music/utils/oss.dart';
import 'package:live_music/utils/util.dart';

class UserInfoIndexPage extends StatefulWidget {
  UserInfoIndexPage({Key key}) : super(key: key);

  @override
  _UserInfoIndexPageState createState() => _UserInfoIndexPageState();
}

class _UserInfoIndexPageState extends State<UserInfoIndexPage>
    with SingleTickerProviderStateMixin {
  final _userInfoController = Get.find<UserInfoController>();
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          elevation: 0.0,
          centerTitle: true,
          title: Text('编辑资料'),
        ),
        backgroundColor: Colors.white,
        body: Obx(() {
          return Container(
            child: Column(
              children: [
                Container(
                    alignment: Alignment.center,
                    padding: EdgeInsets.all(10),
                    child: InkWell(
                      child: Stack(
                        children: [
                          Container(
                            margin: EdgeInsets.symmetric(vertical: 20),
                            child: CircleAvatar(
                                radius: 48,
                                backgroundImage: NetworkImage(
                                  _userInfoController.userInfo.value.avatarUrl,
                                )),
                          ),
                          Positioned(
                            bottom: 24,
                            right: 4,
                            child: Icon(
                              Icons.camera_alt,
                              color: Colors.black,
                            ),
                          )
                        ],
                      ),
                      onTap: _chooseAvatarUrl,
                    )),
                Cell(
                  '昵称',
                  onTap: () {
                    Get.to(EditUserInfoPage(editType: "昵称"));
                  },
                  right: Text(
                    _userInfoController.userInfo.value.name,
                    style: TextStyle(fontSize: WcaoTheme.fsL),
                  ),
                ),
                Cell(
                  '简介',
                  onTap: () {
                    Get.to(EditUserInfoPage(editType: "简介"));
                  },
                  right: Text(
                    _userInfoController.userInfo.value.description,
                    style: TextStyle(fontSize: WcaoTheme.fsL),
                  ),
                ),
                Cell(
                  '性别',
                  onTap: () {
                    Get.to(EditUserInfoPage(editType: "性别"));
                  },
                  right: Text(
                    _userInfoController.userInfo.value.gender == 1 ? '男' : '女',
                    style: TextStyle(fontSize: WcaoTheme.fsL),
                  ),
                ),
                Cell(
                  '生日',
                  onTap: () {
                    Get.to(EditUserInfoPage(editType: "生日"));
                  },
                  right: Text(
                    _userInfoController.userInfo.value.birthday,
                    style: TextStyle(fontSize: WcaoTheme.fsL),
                  ),
                ),
                Cell(
                  '地区',
                  onTap: () {
                    Get.to(EditUserInfoPage(editType: "地区"));
                  },
                  right: Text(
                    _userInfoController.userInfo.value.province +
                        "-" +
                        _userInfoController.userInfo.value.city,
                    style: TextStyle(fontSize: WcaoTheme.fsL),
                  ),
                ),
                Cell(
                  "学校",
                  onTap: () {
                    Get.to(EditUserInfoPage(editType: "学校"));
                  },
                  right: Text(
                    _userInfoController.userInfo.value.university,
                    style: TextStyle(fontSize: WcaoTheme.fsL),
                  ),
                ),
                Cell("背景图",
                    onTap: _chooseBgUrl,
                    right: Container(
                      width: 60,
                      height: 70,
                      child: CgqUtils.imageCache(
                          _userInfoController.userInfo.value.bgUrl,
                          fit: BoxFit.cover),
                    )),
              ],
            ),
          );
        }));
  }

  _chooseAvatarUrl() async {
    FilePickerResult result = await FilePicker.platform.pickFiles(
      type: FileType.image,
    );
    String bgUrl = await UploadOss.upload(File(result.files.first.path),
        rootDir: "userAvatar");
    _userInfoController.updateUserInfo({
      "avatarUrl": bgUrl,
    });
  }

  _chooseBgUrl() async {
    FilePickerResult result = await FilePicker.platform.pickFiles(
      type: FileType.image,
    );
    String bgUrl = await UploadOss.upload(File(result.files.first.path),
        rootDir: "userBgUrl");
    _userInfoController.updateUserInfo({"bgUrl": bgUrl});
  }
}

class Cell extends StatelessWidget {
  const Cell(
    this.text, {
    Key key,
    this.border = true,
    this.right,
    this.onTap,
  }) : super(key: key);

  /// 底部 border 是否显示
  final bool border;

  /// 右侧文字
  final String text;

  /// 右侧内容
  final Widget right;

  /// 点击回调
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      padding: const EdgeInsets.symmetric(horizontal: 12),
      child: Hero(
          tag: text,
          child: InkWell(
            onTap: onTap,
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 16),
              decoration: BoxDecoration(
                  border: Border(
                bottom: BorderSide(
                    width: .5,
                    color: border ? WcaoTheme.outline : Colors.transparent),
              )),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                      width: toRpx(size: 130),
                      child: Text(
                        text,
                        style: TextStyle(
                          fontSize: WcaoTheme.fsL,
                          color: WcaoTheme.base,
                        ),
                      )),
                  Row(children: [
                    Container(
                        alignment: Alignment.centerRight,
                        width: toRpx(size: 500),
                        child: right),
                    Container(
                      margin: EdgeInsets.only(left: 5),
                      child: Icon(
                        Icons.arrow_forward_ios,
                        size: WcaoTheme.fsXl,
                        color: WcaoTheme.secondary,
                      ),
                    )
                  ])
                ],
              ),
            ),
          )),
    );
  }
}
